<template>
  <div class="soubg">
    <div class="sou">
      <!--Begin 所在收货地区 Begin-->
      <span class="s_city_b">
        <span class="fl">送货至：</span>
        <span class="s_city">
          <span>四川</span>
          <div class="s_city_bg">
            <div class="s_city_t"></div>
            <div class="s_city_c">
              <h2>请选择所在的收货地区</h2>
              <table border="0" class="c_tab" style="width:235px; margin-top:10px;" cellspacing="0" cellpadding="0">
                <tbody>
                  <tr>
                    <th>A</th>
                    <td class="c_h"><span>安徽</span><span>澳门</span></td>
                  </tr>
                  <tr>
                    <th>B</th>
                    <td class="c_h"><span>北京</span></td>
                  </tr>
                  <tr>
                    <th>C</th>
                    <td class="c_h"><span>重庆</span></td>
                  </tr>
                  <tr>
                    <th>F</th>
                    <td class="c_h"><span>福建</span></td>
                  </tr>
                  <tr>
                    <th>G</th>
                    <td class="c_h"><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                  </tr>
                  <tr>
                    <th>H</th>
                    <td class="c_h">
                      <span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span>
                    </td>
                  </tr>
                  <tr>
                    <th>J</th>
                    <td class="c_h"><span>江苏</span><span>吉林</span><span>江西</span></td>
                  </tr>
                  <tr>
                    <th>L</th>
                    <td class="c_h"><span>辽宁</span></td>
                  </tr>
                  <tr>
                    <th>N</th>
                    <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                  </tr>
                  <tr>
                    <th>Q</th>
                    <td class="c_h"><span>青海</span></td>
                  </tr>
                  <tr>
                    <th>S</th>
                    <td class="c_h"><span>上海</span><span>山东</span><span>山西</span><span
                        class="c_check">四川</span><span>陕西</span></td>
                  </tr>
                  <tr>
                    <th>T</th>
                    <td class="c_h"><span>台湾</span><span>天津</span></td>
                  </tr>
                  <tr>
                    <th>X</th>
                    <td class="c_h"><span>西藏</span><span>香港</span><span>新疆</span></td>
                  </tr>
                  <tr>
                    <th>Y</th>
                    <td class="c_h"><span>云南</span></td>
                  </tr>
                  <tr>
                    <th>Z</th>
                    <td class="c_h"><span>浙江</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </span>
      </span>
      <!--End 所在收货地区 End-->

      <div class="fr">
        <span class="fl">
          <a href="/" @click.prevent="toIndex">回到首页</a>&nbsp;|&nbsp;
        </span>
        <span class="fl" v-if="!isLoggedIn">
          你好，请<a href="" @click.prevent="toLogin()">登录</a>&nbsp;
          <a href="#" @click.prevent="toRegist()" style="color: #ff4e00">立即注册</a>&nbsp;|
        </span>
        <span class="fl" v-else>
          欢迎，{{ userName }}!&nbsp;|&nbsp;<a href="#" @click.prevent="logout">退出</a>&nbsp;|&nbsp;
          <a href="#" @click.prevent="toMyOrder()" v-if="userType==0">我的订单</a>&nbsp;
          <a href="#" @click.prevent="toMyOrder()" v-if="userType==1">全部订单</a>&nbsp;
        </span>
        <div class="ss">
          <div class="ss_list">
            <a @click="toLikePro">收藏夹</a> 
          </div>
          <div class="ss_list">
            <a @click.prevent="toUserInfo()">用户中心</a>
            </div>
          <div class="ss_list">
            <a @click.prevent="toBuyCar()">购物车结算</a>
          </div>
        </div>
        <span class="fl">|&nbsp;关注我们：</span>
        <span class="s_sh">
          <a href="#" class="sh1">新浪</a>
          <a href="#" class="sh2">微信</a>
        </span>
        <div class="fr">
          |&nbsp;<a href="#">手机版&nbsp;<img src="/images/s_tel.png" align="absmiddle" /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'

const store = useStore()
const router = useRouter()

 const id = window.sessionStorage.getItem('id')
const userType = sessionStorage.getItem('type')
const isLoggedIn = ref(false)
const userName = ref('')

const toIndex = () => {
  setShowPage(0)
  router.push({ name: 'index' })
}

//前往订单详情
function toMyOrder() {

  router.push({
    path: '/allOrder',
  });
}


// 检查用户是否已登录
const checkLoginStatus = () => {
  const token = window.sessionStorage.getItem('token')
  const name = window.sessionStorage.getItem('userName')

  if (token && name) {
    isLoggedIn.value = true
    userName.value = name
  } else {
    isLoggedIn.value = false
    userName.value = ''
  }
}

// 页面加载时检查登录状态
onMounted(() => {
  checkLoginStatus()
  // 监听路由变化事件
  window.addEventListener('route-changed', checkLoginStatus)
})

// 组件卸载时移除事件监听
onUnmounted(() => {
  window.removeEventListener('route-changed', checkLoginStatus)
})

const setShowPage = (val) => {
  store.commit('setShowPage', val)
}

const toRegist = () => {
  router.push({ name: 'regist' })
}

const toLogin = () => {
  router.push({
    name: 'login'
  })
}

const toUserInfo = () => {
  if (id == null) {
        alert("请先登录")
        return
    }
  router.push({
    name: 'userInfo'
  })
}

const toBuyCar = async () => {
    if (id == null) {
        alert("请先登录")
        return
    }
 router.push('/buyCar')
}

const toLikePro = () => {
  if (id == null) {
        alert("请先登录")
        return
    }
  router.push({
    name: 'collectProduct'
  })
}


const logout = async () => {

  if (confirm("是否退出登录？")) {
    await axios.post('/api/loginOutUser', {
    })

    window.sessionStorage.removeItem('token')
    window.sessionStorage.removeItem('loginName')
    window.sessionStorage.removeItem('userName')
    window.sessionStorage.removeItem('type')

    // 更新登录状态
    checkLoginStatus()

    // 跳转到首页
    router.push('/')
  }
}

</script>

<style></style>